<div nz-row>
  <div nz-col nzSpan="24">
    <div nz-row style="margin-bottom: 20px;">
      <div nz-col nzSpan="4">规则名称：</div>
      <div nz-col nzSpan="6">
        <nz-input-group [nzSuffix]="ruleNameInputClearTpl">
          <input type="text" nz-input [(ngModel)]="ruleName" />
        </nz-input-group>
        <ng-template #ruleNameInputClearTpl><i nz-icon class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle"
            *ngIf="ruleName" (click)="ruleName = null"></i></ng-template>
      </div>
    </div>
    <div nz-row style="margin-bottom: 20px;">
      <div nz-col nzSpan="4">规则状态：</div>
      <div nz-col nzSpan="6">
        <nz-select [(ngModel)]="ruleState">
          <nz-option nzValue="激活" nzLabel="激活"></nz-option>
          <nz-option nzValue="暂停" nzLabel="暂停"></nz-option>
        </nz-select>
      </div>
    </div>
    <div nz-row style="margin-bottom: 20px;">
      <div nz-col nzSpan="4">统计窗口：</div>
      <div nz-col nzSpan="6">
        <nz-select [(ngModel)]="windowType">
          <nz-option nzValue="分钟" nzLabel="分钟"></nz-option>
          <nz-option nzValue="小时" nzLabel="小时"></nz-option>
          <nz-option nzValue="天" nzLabel="天"></nz-option>
          <nz-option nzValue="月" nzLabel="月"></nz-option>
          <nz-option nzValue="年" nzLabel="年"></nz-option>
        </nz-select>
      </div>
    </div>
    <div nz-row style="margin-bottom: 20px;">
      <div nz-col nzSpan="4">窗口时长：</div>
      <div nz-col nzSpan="3">
        <nz-input-group [nzSuffix]="windowSizeInputClearTpl">
          <input type="number" nz-input [(ngModel)]="windowSize" />
        </nz-input-group>
        <ng-template #windowSizeInputClearTpl><i nz-icon class="ant-input-clear-icon" nzTheme="fill"
            nzType="close-circle" *ngIf="windowSize" (click)="windowSize = null"></i></ng-template>
      </div>
    </div>
    <div nz-row style="margin-bottom: 20px;">
      <div nz-col nzSpan="4">窗口最晚接收时限（秒）：</div>
      <div nz-col nzSpan="3">
        <nz-input-group [nzSuffix]="waterMarkInputClearTpl">
          <input type="number" nz-input [(ngModel)]="waterMark" />
        </nz-input-group>
        <ng-template #waterMarkInputClearTpl><i nz-icon class="ant-input-clear-icon" nzTheme="fill"
            nzType="close-circle" *ngIf="waterMark" (click)="waterMark = null"></i></ng-template>
      </div>
    </div>
    <div nz-row style="margin-bottom: 20px;">
      <div nz-col nzSpan="4">指标名称：</div>
      <div nz-col nzSpan="15">
        <nz-select style="width: 200px;" nzShowSearch nzServerSearch nzPlaceHolder="输入指标名称查询" [nzShowArrow]="false"
          [(ngModel)]="selectedMetric" [nzFilterOption]="nzFilterOption" (nzOnSearch)="onMetricSerach($event)"
          (ngModelChange)="addMetricTag()">
          <nz-option *ngFor="let metric of metrics" [nzLabel]="metric" [nzValue]="metric">
          </nz-option>
        </nz-select>
      </div>
    </div>
    <div nz-row style="margin-bottom: 20px;" *ngFor="let tag of tags; let i = index">
      <div nz-col nzSpan="4">标签名称：</div>
      <div nz-col nzSpan="4">
        <nz-select style="width: 150px;" [(ngModel)]="tags[i].tagKey">
          <nz-option *ngFor="let groupBy of tagsOfMetric" [nzLabel]="groupBy" [nzValue]="groupBy"></nz-option>
        </nz-select>
      </div>
      <div nz-col nzSpan="2">标签值：</div>
      <div nz-col nzSpan="12">
        <nz-select style="width: 400px;" nzShowSearch nzServerSearch nzPlaceHolder="" [nzShowArrow]="false"
                   [(ngModel)]="tags[i].tagValue" [nzFilterOption]="nzFilterOption"
                   (nzOnSearch)="queryTagValueOfMetric(i,$event)">
          <nz-option *ngFor="let tagValue of tagValues" [nzLabel]="tagValue" [nzValue]="tagValue">
          </nz-option>
        </nz-select>
        <i nz-icon nzType="minus-circle-o" class="dynamic-delete-button" (click)="deleteTag(i,$event)"></i>
      </div>
    </div>
    <div nz-row style style="margin-bottom: 20px;">
      <div nz-col nzSpan="4"></div>
      <div nz-col nzSpan="20">
        <button nz-button nzType="dashed" style="width:60%" (click)="addTag($event)">
          <i nz-icon nzType="plus"></i>增加过滤条件（先选择指标）
        </button>
      </div>
    </div>
    <div nz-row style="margin-bottom: 20px;" *ngFor="let workingTimeWindow of workingTimeWindows; let i = index">
      <div nz-col nzSpan="4">工作时间窗口：</div>
      <div nz-col nzSpan="4">
        <nz-time-picker [(ngModel)]="workingTimeWindow.beginTime"></nz-time-picker>
      </div>
      <div nz-col nzSpan="1">-</div>
      <div nz-col nzSpan="4">
        <nz-time-picker [(ngModel)]="workingTimeWindow.endTime"></nz-time-picker>
        <i nz-icon nzType="minus-circle-o" class="dynamic-delete-button" (click)="deleteWorkingTimeWindow(i,$event)"></i>
      </div>
    </div>
    <div nz-row style style="margin-bottom: 20px;">
      <div nz-col nzSpan="4"></div>
      <div nz-col nzSpan="20">
        <button nz-button nzType="dashed" style="width:60%" (click)="addWorkingTimeWindow($event)">
          <i nz-icon nzType="plus"></i>增加工作时间窗口
        </button>
      </div>
    </div>
    <div nz-row style="margin-bottom: 20px;">
      <div nz-col nzSpan="24">
        <nz-tabset [(nzSelectedIndex)]="metricTagIndex" nzType="editable-card" nzHideAdd
          (nzClose)="closeMetricTag($event)">
          <nz-tab *ngFor="let metricTag of metricTags; let i = index" [nzClosable]="true" [nzTitle]="metricTag.name">
            <div nz-row style="margin-top: 20px;margin-bottom: 20px;">
              <div nz-col nzSpan="3">统计函数：</div>
              <div nz-col nzSpan="6">
                <nz-select [(ngModel)]="metricTag.aggregatorFunctionType">
                  <nz-option nzValue="平均值" nzLabel="平均值"></nz-option>
                  <nz-option nzValue="最小值" nzLabel="最小值"></nz-option>
                  <nz-option nzValue="最大值" nzLabel="最大值"></nz-option>
                  <nz-option nzValue="总和" nzLabel="总和"></nz-option>
                  <nz-option nzValue="次数" nzLabel="次数"></nz-option>
                </nz-select>
              </div>
            </div>
            <div nz-row style="margin-bottom: 20px;">
              <div nz-col nzSpan="3">判断条件：</div>
              <div nz-col nzSpan="6">
                <nz-select [(ngModel)]="metricTag.limitOperatorType">
                  <nz-option nzValue="=" nzLabel="="></nz-option>
                  <nz-option nzValue="!=" nzLabel="!="></nz-option>
                  <nz-option nzValue="&gt;=" nzLabel="&gt;="></nz-option>
                  <nz-option nzValue="&lt;=" nzLabel="&lt;="></nz-option>
                  <nz-option nzValue="&gt;" nzLabel="&gt;"></nz-option>
                  <nz-option nzValue="&lt;" nzLabel="&lt;"></nz-option>
                </nz-select>
              </div>
            </div>
            <div nz-row style="margin-bottom: 20px;">
              <div nz-col nzSpan="3">判断阀值：</div>
              <div nz-col nzSpan="6">
                <input type="number" nz-input [(ngModel)]="metricTag.limit" />
              </div>
            </div>
          </nz-tab>
        </nz-tabset>
      </div>
    </div>
    <div nz-row>
      <div nz-col nzSpan="12">
        <button nz-button nzBlock="true" nzType="primary" nzBlock (click)='onCreate()'>创建</button>
      </div>
    </div>
  </div>
</div>
<nz-divider nzText=""></nz-divider>